<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.global.js"></script>
</head>
<body>
  <div id="root">
    {{ title }}
  </div>
</body>
<script>
  const { createApp } = window.Vue

  const app = createApp({
    data () {
      return {
        title: 'hello',
        obj: {
          a: 1
        }
      }
    },
    watch: {
      title (newVal, oldVal) {
        console.log(newVal, oldVal)
      },
    //   obj (newVal, oldVal) {
    //       console.log(111)
    //     console.log(newVal, oldVal)
    //   }
      obj: {
        handler (newVal, oldVal) {
          console.log(newVal,oldVal)
        },
        deep: true,  // 代表深度监听
        immediate: true // 第一次就监听
      }
    }
  })

  const vm = app.mount('#root')

  vm.title = 'hi'
  vm.obj.a = 10
</script>
</html>